import { defineComponent, toRefs } from 'vue'

// 定义一个组件
export default defineComponent({
  // 定义组件的props
  props: {
    // 原始文本
    originText: {
      type: String,
      default: ''
    },
    // 关键词
    keyword: {
      type: String,
      default: ''
    }
  },
  // 组件名称
  __name: 'KeywordHighLight',
  // 组件的setup函数
  setup(props) {
    // 将props中的keyword和originText转换为ref
    const { keyword, originText } = toRefs(props)

    // 标记关键词
    const markKeyWords = () => {
      // 如果没有关键词，则直接返回原始文本
      if (!keyword.value || keyword.value.length === 0) {
        return <span>{originText.value}</span>
      }
      // 将关键词转换为正则表达式
      const regStr = keyword.value.split('').reduce((str, item, index) => {
        if (index === keyword.value.length - 1) {
          return (str += `(${item})`)
        } else {
          return (str += `(${item})|`)
        }
      }, '')

      const reg = new RegExp(regStr)
      // 将原始文本按照关键词进行分割
      const strArr = originText.value.split(reg)
      // 遍历分割后的文本，如果包含关键词，则标记为蓝色
      return strArr.map((item, index) => {
        if (item) {
          if (keyword.value.includes(item)) {
            return (
              <span style={{ color: '#0052D9' }} key={index}>
                {item}
              </span>
            )
          } else {
            return <span key={index}>{item}</span>
          }
        } else {
          return null 
        }
      })
    }

    // 返回组件的渲染函数
    return () => {
      return <div>{markKeyWords()}</div>
    }
  }
})
